<template>
	<div id="quku_artist">
		<div class="container">
			<div class="handle-box">
				<!-- <el-row>
                    <el-col :offset="0" :span="1">
                        <el-checkbox v-if="btnPermit" v-model="query.checked" @change="handleStatusChange" style="margin-bottom: 18px">
                            {{ $t('m.daiShenHeTick') }}
                        </el-checkbox>
                    </el-col>
                    <el-col :offset="1" :span="1">
                        <el-button type="primary" size="mini" @click="handleIncrease" style="margin-left: 10px; margin-bottom: 0px;">
                            {{ $t('m.increaseBtn') }}
                        </el-button>
                    </el-col>
                    <el-col :offset="0" :span="21"> </el-col>
                </el-row> -->
				<el-checkbox v-if="btnPermit" v-model="query.checked" @change="handleStatusChange" style="margin-bottom: 18px">
					{{ $t('m.daiShenHeTick') }}
				</el-checkbox>
				<el-button type="primary" size="mini" @click="handleIncrease" style="margin-left: 10px; margin-bottom: 0px">
					<!-- 新增 -->
					{{ $t('m.increaseBtn') }}
				</el-button>
				<el-form ref="form" :inline="true" :model="form">
					<el-form-item label="">
						<el-input
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							v-model="query.id"
							class="handle-input mr10"
							placeholder="ID"
						></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							v-model="query.name"
							placeholder="歌手名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							v-model="query.namePinyinFull"
							placeholder="拼音名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>
					<!-- <el-form-item label="">
                        <el-input
                            clearable
                            @clear="handleSearch"
                            @keyup.native.enter="handleSearch"
                            v-model="query.foreignName"
                            placeholder="翻译名"
                            class="handle-input mr10"
                        ></el-input>
                    </el-form-item> -->
					<el-form-item label="">
						<el-select
							:clearable="true"
							v-model="query.type"
							placeholder="类型"
							class="handle-select mr10"
							@change="handleSearch"
						>
							<!-- <el-option key="0" label="流行" value="0"></el-option>
                            <el-option key="1" label="摇滚" value="1"></el-option> -->
							<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="">
						<el-select
							:clearable="true"
							v-model="query.area"
							placeholder="地区"
							class="handle-select mr10"
							@change="handleSearch"
						>
							<el-option v-for="(item, index) in areas" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="">
						<el-select
							:clearable="true"
							v-model="query.status"
							placeholder="状态"
							class="handle-select mr10"
							@change="handleSearch"
						>
							<el-option key="0" label="无效" value="0"></el-option>
							<el-option key="1" label="有效" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button :disabled="disabled" type="primary" @click="handleSearch">
							<!-- 查询 -->
							{{ $t('m.queryBtn') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table
				:data="tableData"
				border
				class="table"
				ref="multipleTable"
				header-cell-class-name="table-header"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column width="auto" label="歌手ID" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.id }}</template>
				</el-table-column>
				<el-table-column width="auto" label="externalId" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.externalId }}</template>
				</el-table-column>
				<!-- <el-table-column  prop="name" label="用户名"></el-table-column> -->
				<el-table-column width="auto" label="歌手名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.importName }}</template>
				</el-table-column>
				<el-table-column width="auto" label="拼音名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.namePinyinFull }}</template>
				</el-table-column>
				<el-table-column width="auto" label="外文名" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.foreignName }}</template>
				</el-table-column>
				<!-- <el-table-column  width="auto" label="评级" align="center">
                    <template slot-scope="scope">{{ scope.row.foreignName }}</template>
                </el-table-column> -->
				<!-- <el-table-column  width="auto" label="关键字" align="center">
                    <template slot-scope="scope">{{ scope.row.foreignName }}</template>
                </el-table-column> -->
				<el-table-column width="auto" label="类型" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.type }}</template>
				</el-table-column>
				<el-table-column width="auto" label="国籍" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.area }}</template>
				</el-table-column>
				<el-table-column width="auto" label="状态" align="center">
					<template slot-scope="scope">
						<img
							v-if="scope.row.status == 1"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u464.png"
							alt=""
						/>
						<img
							v-else-if="scope.row.status == 0"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u468.png"
							alt=""
						/>
					</template>
				</el-table-column>
				<el-table-column width="auto" label="操作者" align="center" :show-overflow-tooltip="true" v-if="query.show">
					<template slot-scope="scope">{{ scope.row.modifiedBy }}</template>
				</el-table-column>
				<el-table-column width="auto" label="更新时间" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.updateTime }}</template>
				</el-table-column>
				<el-table-column width="300" label="管理" align="center">
					<template slot-scope="scope">
						<!-- <span
                            style="font-size:12px;display: inline-block; cursor: pointer; width: 30px; border-radius: 5px; background: #409eff; color: #fff; margin-right:10px;"
                            @click="handleEdit(scope.$index, scope.row)"
                        >
                            编辑</span
                        > -->
						<!-- <span
                            style="font-size:12px;display: inline-block;  cursor: pointer; width: 40px; border-radius: 5px; background: #e6a23c; color: #fff;"
                            @click="handleTagging(scope.$index, scope.row)"
                            >打标签</span
                        > -->
						<el-button
							@click="handleEdit(scope.$index, scope.row, 0)"
							v-if="!query.show"
							type="primary"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 查看 -->
							{{ $t('m.seeBtn') }}
						</el-button>
						<el-button
							@click="handleEdit(scope.$index, scope.row, 1)"
							v-if="!query.show"
							type="primary"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 编辑 -->
							{{ $t('m.editBtn') }}
						</el-button>
						<el-button
							@click="handleTagging(scope.$index, scope.row)"
							v-if="!query.show"
							type="warning"
							size="mini"
							:disabled="scope.row.editFlag == -1"
						>
							<!-- 打标签 -->
							{{ $t('m.hitLabelBtn') }}
						</el-button>
						<el-button @click="handleChecked(scope.$index, scope.row)" v-if="query.show" type="warning" size="mini"
							>审核</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total,sizes, prev, pager, next, jumper"
					:page-sizes="[5, 10, 20, 30]"
					@size-change="handleSizeChange"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
		<!-- 打标签弹出框 -->
		<el-dialog
			title="打标签"
			:visible.sync="editVisible"
			width="30%"
			:close-on-click-modal="false"
			:show-close="true"
			@close="handleClose"
		>
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="歌手名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="标签：">
					<div class="block">
						<el-cascader
							:show-all-levels="false"
							v-model="form.tblTags"
							class="w"
							:options="tagList"
							:props="{
								emitPath: false,
								multiple: true,
								checkStrictly: true,
								value: 'value',
								label: 'label',
								children: 'children'
							}"
						>
							<template slot-scope="{ node, data }">
								<span>{{ data.label }}</span>
								<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
							</template>
						</el-cascader>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveTagging">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { types } from './types';
	import { areas } from './areas';
	import NProgress from 'nprogress';
	import { mapGetters, mapMutations, mapActions } from 'vuex';
	import { debounce, throttle } from '@/utils/utils.js';
	import axios from 'axios';
	export default {
		name: 'QukuArtist',
		data() {
			return {
				btnPermit: JSON.parse(localStorage.getItem('roles')) ? JSON.parse(localStorage.getItem('roles')).includes('ADMIN') : false,
				disabled: false,
				actorId: '',
				// show: false,
				// 抽离到vuex管理的数据
				// query: {
				//     show: false,
				//     checked: false,
				//     pageIndex: 1,
				//     pageSize: 10,
				//     id: '',
				//     name: '',
				//     namePinyinFull: '',
				//     type: '',
				//     area: '',
				//     status: ''
				// },
				// tableData: [],
				// pageTotal: 0,
				// 抽离到vuex管理的数据

				options: types,
				areas: areas,
				editVisible: false,
				tagList: [],
				operator: localStorage.getItem('ms_username') || '',

				form: {}
			};
		},
		destroyed() {
			if (!this.tagsList.some((item) => item.name === 'QukuArtist')) {
				// 关闭标签
				this.SET_QUKUARTIST_DATA([]);
				this.SET_QUKUARTIST_PAGETOTAL(0);
				this.SET_QUKUARTIST_QUERY({
					show: false,
					checked: false,
					pageIndex: 1,
					pageSize: 10,
					id: '',
					name: '',
					namePinyinFull: '',
					type: '',
					area: '',
					status: ''
				});
			} else {
				//  只是点击切换标签 没有关闭标签 什么都不做
			}
		},
		// created() {
		//     if (this.query.checked === true) {
		//         if (this.tableData.length === 0) {
		//             this.getCheckedData();
		//         } else {
		//             //  什么都不做
		//         }
		//     } else if (this.query.checked === false) {
		//         if (this.tableData.length === 0) {
		//             this.getData();
		//         } else {
		//             //  什么都不做
		//         }
		//     }
		// },
		watch: {
			$route: {
				deep: true,
				immediate: true, // 添加这个属性后 created 周期函数可以省略
				handler(a, b) {
					console.log(a, b);
					if (a.name === 'QukuArtist' && this.query.checked === true) {
						if (this.tableData.length === 0) {
							this.getCheckedData();
						} else {
							//  什么都不做
						}
					} else if (a.name === 'QukuArtist' && this.query.checked === false) {
						if (this.tableData.length === 0) {
							this.getData();
						} else {
							//  什么都不做
						}
					}
				}
			}
		},
		computed: {
			...mapGetters({
				pageTotal: 'qukuArtistPageTotal',
				tableData: 'qukuArtistData',
				query: 'qukuArtistQuery',
				tagsList: 'tagsList'
			})
		},
		methods: {
			// 新增
			handleIncrease() {
				// 查看
				this.$router.replace({
					path: '/singer_/add',
					query: {}
				});
			},
			cancelQuest() {
				// console.log(this.source);
				if (this.source && typeof this.source === 'function') {
					this.source('终止请求'); //取消请求
				}
			},
			handleChecked(index, row) {
				console.log(index, row);
				this.$router.replace({
					path: '/singer_/checked',
					query: {
						id: row.id
					}
				});
				localStorage.setItem('id_singer', row.id);
			},
			handleStatusChange: debounce(function (value) {
				console.log(value);
				setTimeout(() => {
					if (value == true) {
						this.$set(this.query, 'pageIndex', 1);
						this.getCheckedData();
					} else {
						this.$set(this.query, 'pageIndex', 1);
						this.getData();
					}
				}, 500);
			}, 1000),
			// handleStatusChange(value) {
			//     console.log(value);
			//     if (value == true) {
			//         this.$set(this.query, 'pageIndex', 1);
			//         this.getCheckedData();
			//     } else {
			//         this.$set(this.query, 'pageIndex', 1);
			//         this.getData();
			//     }
			// },
			async getCheckedData() {
				try {
					let _this = this;
					this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
					NProgress.start();
					let url = '/artist/list';
					let { data: res } = await this.$http[0].get(url, {
						headers: {},
						cancelToken: new axios.CancelToken(function executor(c) {
							_this.source = c;
						}),
						params: this.$removeField({
							page: this.query.pageIndex,
							size: this.query.pageSize,
							ids: this.query.id.trim(),
							importName: this.query.name.trim(),
							namePinyinFull: this.query.namePinyinFull.trim(),
							type: this.query.type,
							area: this.query.area,
							status: this.query.status,
							auditFlag: -1
						})
					});
					console.log('待审核', res);
					// 中间处理
					if (res.data.content && res.data.content.length > 0) {
						res.data.content.map((val) => {
							for (let item of types) {
								if (val.type == item.value) {
									val.type = item.label;
								}
							}
							for (let item of areas) {
								if (val.area == item.value) {
									val.area = item.label;
								}
							}
							val.updateTime = this.$dateFormat(val.updateTime, '', '/');
						});
						this.SET_QUKUARTIST_DATA(res.data.content);
						this.SET_QUKUARTIST_PAGETOTAL(res.data.totalElements);
						var tempQuery = { ...this.query };
						this.$set(tempQuery, 'show', true);
						this.SET_QUKUARTIST_QUERY(tempQuery);
					} else {
						this.SET_QUKUARTIST_DATA([]);
						this.SET_QUKUARTIST_PAGETOTAL(0);
						var tempQuery = { ...this.query };
						this.$set(tempQuery, 'show', true);
						this.SET_QUKUARTIST_QUERY(tempQuery);
					}
					NProgress.done();
				} catch (err) {
					NProgress.done();
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			handleClose() {
				this.$handleUnlock.call(this, this.close, '/artist/unlock', this.actorId);
			},
			close() {
				this.editVisible = false;
			},
			// async handleUnlock(callback) {
			//     try {
			//         let url = '/artist/unlock';
			//         let { data: res } = await this.$http[0].get(url, {
			//             params: {
			//                 id: this.actorId
			//             }
			//         });
			//         if (res.code != '0000') {
			//             throw new Error(res.message);
			//         }
			//         callback && callback();
			//     } catch (err) {
			//         console.dir(err);
			//         this.$message.error({
			//             message: err.message,
			//             duration: 1500
			//         });
			//     }
			// },
			saveTagging() {
				// this.$handleUnlock.call(this, this.save, '/artist/unlock', this.actorId);
				this.save();
			},
			async save() {
				try {
					let url = '/artist/tagging';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							objectId: this.actorId,
							// tagIds: this.getOneArray(this.form.tags).join(',')
							tagIds: this.form.tblTags.join(',')
						}),
						headers: {
							name: localStorage.getItem('ms_username')
						}
					});
					console.log(res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					this.$message.success({
						message: res.message,
						duration: 1500
					});
					this.form = {
						tblTags: [],
						name: ''
					};
					this.editVisible = false;
					this.getData();
				} catch (err) {
					console.dir(err);
					this.editVisible = false;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			getOneArray(twoArray) {
				var tempArr = [];
				if (twoArray && twoArray.length && twoArray.length > 0) {
					twoArray = Array.from(twoArray);
					twoArray.map((arr) => {
						arr = arr || [];
						arr = Array.from(arr);
						tempArr.push(arr[arr.length - 1]);
					});
				}
				return [...new Set(tempArr)];
			},
			// 打标签
			handleTagging(index, row) {
				this.$handleLock.call(this, index, row, this.tagging, '/artist/lock', row.id);
			},
			tagging(index, row) {
				this.actorId = row.id;
				this.editVisible = true;
				this.tagList = [];
				this.form = {};
				this.getEditData(row.id);
				this.getTagData();
			},
			async getEditData(actorId) {
				try {
					let url = '/artist/gettag';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							actorId
						})
					});

					console.log(res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					// this.form = res.data;
					this.form = {
						tblTags: [],
						name: ''
					};
					this.form.name = res.data.name;
					// this.form.tblTags = [];
					// if (res.data.tblTags && res.data.tblTags.length && res.data.tblTags.length > 0) {
					//     for (var i = 0, len = res.data.tblTags.length; i < len; i++) {
					//         if (res.data.tblTags[i].groupId) {
					//             this.form.tblTags.push([res.data.tblTags[i].groupId, res.data.tblTags[i].id]);
					//         } else if (res.data.tblTags[i].pid) {
					//             this.form.tblTags.push([res.data.tblTags[i].pid, res.data.tblTags[i].id]);
					//         }
					//     }
					// }

					if (res.data.tblTags && res.data.tblTags.length && res.data.tblTags.length > 0) {
						this.form.tblTags = res.data.tblTags;
					} else {
						this.form.tblTags = [];
					}
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			async getTagData() {
				try {
					let url = '/tag/tagAll';
					let { data: res } = await this.$http[2].get(url, {
						params: {
							type: 3
							// page: this.query.pageIndex,
							// size: this.query.pageSize
						}
					});
					console.log('标签列表', res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					if (res.data && res.data.length > 0) {
						res.data.map((v) => {
							v.disabled = true;
						});
						var ret = this.formatData(res.data);
						console.log('ret', ret);
						this.tagList = ret;
						// this.pageTotal = res.data.totalElements || 0;
						// this.SET_QUKUARTIST_PAGETOTAL(res.data.totalElements || 0);
					} else {
						this.tagList = [];
						// this.pageTotal = res.data.totalElements || 0;
						// this.SET_QUKUARTIST_PAGETOTAL(0);
					}
				} catch (err) {
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			formatData(array) {
				for (let item of array) {
					item.value = item.id;
					item.label = item.description;
					item.children = [];
					// 删除返回的没用的属性
					delete item.type;
					delete item.createTime;
					delete item.description;
					delete item.groupId;
					delete item.id;
					delete item.name;
					delete item.status;
					delete item.updateTime;
					delete item.pid;

					if (item.tblTags && item.tblTags.length != 0) {
						item.children = item.tblTags;
						// 删除返回的没用的属性
						delete item.tblTags;
						this.formatData(item.children);
					} else {
						delete item.children;
					}
				}
				return array;
			},
			...mapMutations({
				SET_QUKUARTIST_DATA: 'SET_QUKUARTIST_DATA',
				SET_QUKUARTIST_PAGETOTAL: 'SET_QUKUARTIST_PAGETOTAL',
				SET_QUKUARTIST_QUERY: 'SET_QUKUARTIST_QUERY',
				SET_QUKUARTIST_FORM: 'SET_QUKUARTIST_FORM'
			}),
			// setValueNull() {
			//     this.getData();
			// },
			async getData() {
				try {
					let _this = this;
					this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
					NProgress.start();
					this.disabled = true;
					let url = '/artist/list';
					let { data: res } = await this.$http[0].get(url, {
						cancelToken: new axios.CancelToken(function executor(c) {
							_this.source = c;
						}),
						params: this.$removeField({
							page: this.query.pageIndex,
							size: this.query.pageSize,
							ids: this.query.id.trim(),
							importName: this.query.name.trim(),
							namePinyinFull: this.query.namePinyinFull.trim(),
							// foreignName: this.query.foreignName,
							type: this.query.type,
							area: this.query.area,
							status: this.query.status
						})
					});
					console.log('歌手管理', res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					// 中间处理
					if (res.data.content && res.data.content.length > 0) {
						res.data.content.map((val) => {
							for (let item of types) {
								if (val.type == item.value) {
									val.type = item.label;
								}
							}
							for (let item of areas) {
								if (val.area == item.value) {
									val.area = item.label;
								}
							}
							val.updateTime = this.$dateFormat(val.updateTime, '', '/');
						});
						this.SET_QUKUARTIST_DATA(res.data.content);
						this.SET_QUKUARTIST_PAGETOTAL(res.data.totalElements);
						var tempQuery = { ...this.query };
						this.$set(tempQuery, 'show', false);
						this.SET_QUKUARTIST_QUERY(tempQuery);
					} else {
						this.SET_QUKUARTIST_DATA([]);
						this.SET_QUKUARTIST_PAGETOTAL(0);
						var tempQuery = { ...this.query };
						this.$set(tempQuery, 'show', false);
						this.SET_QUKUARTIST_QUERY(tempQuery);
					}
					NProgress.done();
					this.disabled = false;
				} catch (err) {
					console.dir(err);
					NProgress.done();
					this.disabled = false;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},

			// 触发查询按钮
			// handleSearch() {
			//     this.$set(this.query, 'pageIndex', 1);
			//     if (this.query.checked === true) {
			//         this.getCheckedData();
			//     } else {
			//         this.getData();
			//     }
			// },

			handleSearch: debounce(function () {
				this.$set(this.query, 'pageIndex', 1);
				if (this.query.checked === true) {
					this.getCheckedData();
				} else {
					this.getData();
				}
			}, 300),

			// 多选操作
			handleSelectionChange(val) {},

			// 编辑操作
			handleEdit(index, row, n) {
				if (n == 1) {
					// 编辑
					this.$handleLock.call(this, index, row, this.edit, '/artist/lock', row.id);
					this.$storage.set('operate', { ...this.$storage.get('operate'), name2: 'edit' });
				} else {
					// 查看
					this.edit(index, row);
					this.$storage.set('operate', { ...this.$storage.get('operate'), name2: 'search' });
				}
			},
			edit(index, row) {
				this.SET_QUKUARTIST_FORM({});
				this.$router.replace({
					path: '/singer_/edit',
					query: {
						id: row.id
					}
				});
				localStorage.setItem('id_singer', row.id);
				localStorage.removeItem('indexFlag_singer');
			},
			// async handleLock(index, row, callback) {
			//     try {
			//         let url = '/artist/lock';
			//         let { data: res } = await this.$http[0].get(url, {
			//             headers: {
			//                 name: localStorage.getItem('ms_username')
			//             },
			//             params: {
			//                 id: row.id
			//             }
			//         });
			//         if (res.code != '0000') {
			//             throw new Error(res.message);
			//         }
			//         callback && callback(index, row);
			//     } catch (err) {
			//         console.dir(err);
			//         this.$message.error({
			//             message: err.message,
			//             duration: 1500
			//         });
			//     }
			// },

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.SET_QUKUARTIST_QUERY(this.query);
				if (this.query.checked == true) {
					this.getCheckedData();
				} else {
					this.getData();
				}
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.SET_QUKUARTIST_QUERY(this.query);
				if (this.query.checked == true) {
					this.getCheckedData();
				} else {
					this.getData();
				}
			}
		}
	};
</script>
<style lang="scss">
	#quku_artist {
		.table-header {
			.cell {
				white-space: nowrap !important;
			}
		}

		.handle-box {
			margin-bottom: 20px;

			.el-form {
				// white-space: nowrap;
				display: flex;
				flex-direction: row;

				.el-form-item {
					width: calc(100% / 8);

					.el-form-item__content {
						.el-select,
						.handle-input {
							width: 100%;
						}
					}
				}
			}
		}

		.handle-select {
			width: 120px;
		}

		.handle-input {
			/* width: 300px; */
			width: 69px;
			height: 28px;
			display: inline-block;
		}

		.table {
			width: 100%;
			font-size: 14px;
		}

		.red {
			color: #ff0000;
		}

		.mr10 {
			margin-right: 10px;
		}

		.table-td-thumb {
			display: block;
			margin: auto;
			width: 40px;
			height: 40px;
		}
	}
</style>